import React, { Component } from 'react';
import { Table, Space, Button, Breadcrumb, Divider, Form, Input, DatePicker, Pagination, message } from 'antd';
import { AppstoreTwoTone, DeleteOutlined, UnorderedListOutlined } from '@ant-design/icons'
import styles from './index.less'
import { connect } from 'dva'
/*eslint-disable*/
const { RangePicker } = DatePicker
@connect(({ global }) => ({
  userId: global.userId,
}))
class CollectionForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 0,
      pageSize: 5,
      total: 0,
      collectionName: "",
      startTime: "",
      endTime: "",
      data: [],//表数据
      rangeTimeValue: "",
    }
  }
  componentDidMount() {
    this.getCollectionList()
  }
  //详情
  handleCollectionDetail = (record) => {

  }

  //删除收藏
  handleDelete = (record) => {
    const { dispatch, } = this.props
    dispatch({
      type: "global/deleteCollection",
      payload: {
        userId: this.props.userId ? this.props.userId : "",
        id: record.id
      }
    }).then(() => {
      message.success("删除成功")
      this.getCollectionList()
    })

  }
  //收藏时间
  handleRangeOnChange = (dates, dateStrings) => {
    this.setState({
      startTime: dateStrings[0],
      endTime: dateStrings[1],
      currentPage: 0
    })
  }

  //清除
  clearEvent = (params) => {
    this.setState({
      rangeTimeValue: new Date(),
      collectionName: "",
      startTime: "",
      endTime: "",
    }, () => { this.getCollectionList() })
    // this.getCollectionList()
  }

  //分页
  pageChange = (page, pageSize) => {
    console.log(page, pageSize)
    this.setState({ pageSize: pageSize, currentPage: page }, () => { this.getCollectionList() })
  }
  //
  pageSizeChange = (current, size) => {
    // console.log(size)
    this.setState({ pageSize: size, currentPage: 1 }, () => { this.getCollectionList() })
  }
  searchCollectionList = () => {
    this.setState({
      currentPage: 1
    }, () => {
      this.getCollectionList()
    })
  }
  //获取收藏列表
  getCollectionList = () => {
    console.log(this.props)
    const { dispatch, } = this.props
    let { pageSize, currentPage, collectionName, startTime, endTime, } = this.state
    dispatch({
      type: "global/getCollectionList",
      payload: {
        userId: this.props.userId ? this.props.userId : "",
        keyword: collectionName,
        startTime: startTime,
        endTime: endTime,
        pageSize: pageSize,
        pageNum: currentPage === 0 ? 1 : currentPage
      }
    }).then((res) => {
      console.log(res)
      if (res) {
        res.data.rows.map((item, index) => {
          item.key = item.id
        })
        this.setState({ data: res.data.rows, total: res.data.total })
      }
    })

  }

  render() {
    let { total, collectionName, data, rangeTimeValue, currentPage } = this.state;

    //表头数据
    const columns = [
      // {
      //   title: '编号',
      //   dataIndex: 'resourceId',
      //   key: 'resourceId',
      //   render: (text, record, index) => `${index + 1 + (currentPage - 1) * pageSize}`,
      //   align: "center",
      // },
      {
        title: '资源名称',
        dataIndex: 'title',
        align: "center",
        key: 'title',
      },
      {
        title: '资源发布者',
        dataIndex: 'publisherName',
        align: "center",
        key: 'publisherName',
      },
      {
        title: '资源发布账号',
        key: 'updName',
        align: "center",
        dataIndex: 'updName',
      },
      {
        title: '发布时间',
        key: 'onlineTime',
        align: "center",
        dataIndex: 'onlineTime',
      },
      {
        title: '收藏时间',
        key: 'collectionTime',
        align: "center",
        dataIndex: 'collectionTime',
      },
      {
        title: '操作',
        key: 'action',
        align: "center",
        render: (text, record, index) => (
          <Space size="middle">
            {/* <Button type="primary"
              icon={ <UnorderedListOutlined /> }
              size="small" shape="round"
              style={ { background: "#11bf94" } }
              onClick={ () => this.handleCollectionDetail(record) }>详情</Button> */}
            <Button type="primary"
              icon={<DeleteOutlined />}
              danger
              size="small"
              shape="round"
              onClick={() => this.handleDelete(record)}>移除</Button>
          </Space>
        ),
      },
    ];

    return (
      <div>
        <div className={styles.pagetop}>
          <span className={styles.pageheader}>
            <Breadcrumb>
              <Breadcrumb.Item><AppstoreTwoTone />资源收藏</Breadcrumb.Item>
              <Breadcrumb.Item>
                <a href="/collection">收藏列表</a>
              </Breadcrumb.Item>
            </Breadcrumb>
          </span>
        </div>
        <div style={{ background: "white" }}>
          <div className={styles.form}>
            <Form
              layout="inline"
            >
              <Form.Item
                label="关键字"
              >
                <Input
                  placeholder="请输入关键字"
                  value={collectionName}
                  onChange={(e) => { this.setState({ collectionName: e.target.value, currentPage: 0 }) }} />
              </Form.Item>
              <Form.Item
                label="收藏时间"
              >
                <RangePicker
                  key={rangeTimeValue}
                  showTime
                  style={{ width: "100%" }}
                  format="YYYY/MM/DD HH:mm:ss"
                  onChange={this.handleRangeOnChange}
                />
              </Form.Item>
              <Form.Item>
                <Button type="primary" onClick={this.searchCollectionList}>查询</Button>
                <Button type="default" style={{ marginLeft: "10px" }} onClick={this.clearEvent}>清空</Button>
              </Form.Item>
            </Form>
          </div>
          <Divider />
          <Table
            columns={columns}
            dataSource={data}
            pagination={false}
          />
        </div>
        <div className={styles.pagination}>
          <Pagination
            total={total}
            showSizeChanger
            showQuickJumper
            current={currentPage === 0 ? 1 : currentPage}
            defaultCurrent={1}
            defaultPageSize={5}
            pageSizeOptions={[5, 10, 20, 50]}
            showTotal={total => `共 ${total} 条`}
            onChange={this.pageChange}
            onShowSizeChange={this.pageSizeChange}
          />
        </div>
      </div>
    );
  }
}

export default CollectionForm;